<!--  -->
<template>
  <div class="person">
    <!-- 头部 -->
    <div class="person-head">
      <div class="person-news flex justify-between">
        <span></span>
        <div class="pt-14 pl-14 pr-14">
        </div>
      </div>
      <div class="person-information flex aligin-center">
        <div class="person-information_img">
          <img :src="userInfo.user_headimg" alt="" v-if="userInfo.user_headimg">
          <img src="../../assets/imgs/person_head@3x.png" alt="" v-else>
        </div>
        <div class="person-information_con flex justify-around">
          <template v-if="!userInfo.is_login">
            <router-link class="f-18" tag="h2" to="/login">登录/注册</router-link>
            <span class="f-12 color-gray">欢迎来到融媒优品</span>
          </template>
          <template v-else>
            <h2 class="f-18">{{userInfo.nick_name}}</h2>
          </template>
        </div>
      </div>
    </div>
    <div class="p-r">
      <!-- 账户 -->
      <div class="person_account flex aligin-center show_public">
        <router-link tag="div" :to="{name:'fundDetail'}" class="person_account_item">
          <h2 class="f-18 f-bold">{{userInfo.user_money}}</h2>
          <span class="f-12 mt-10 color-gray">账户余额</span>
        </router-link>
        <router-link
          to="/withdrawal"
          class="person_account_item person_account_itemright flex aligin-center justify-center"
        >
          <!-- <div class=""> -->
          <img src="../../assets/imgs/person_withdrawal@3x.png" alt="">
          <span class="f-15 ml-10 f-bold color-black">账户提现</span>
          <!-- </div> -->
        </router-link>
      </div>
      <!-- 我的订单 -->
      <div class="person_myorder show_public">
        <div class="person_myorder_head flex justify-between">
          <h2 class="f-15 f-bold">我的订单</h2>
          <router-link to="/index/order" class="flex person_myorder_headright aligin-center">
            <span class="f-12 color-black pr-4">查看全部</span>
            <i class="cubeic-select"></i>
          </router-link>
        </div>
        <div class="person_myorder_con flex">
          <router-link
            :to="{path:'/index/order?index=1'}"
            class="person_myorder_item flex aligin-center flex-column"
          >
            <span class="person_myorder_payment"></span>
            <span class="color-black">待付款</span>
          </router-link>
          <router-link
            :to="{path:'/index/order?index=2'}"
            class="person_myorder_item flex aligin-center flex-column"
          >
            <span class="person_myorder_delivery"></span>
            <span class="color-black">待发货</span>
          </router-link>
          <router-link
            :to="{path:'/index/order?index=3'}"
            class="person_myorder_item flex aligin-center flex-column"
          >
            <span class="person_myorder_goods"></span>
            <span class="color-black">待收货</span>
          </router-link>
          <router-link
            :to="{path:'/index/order?index=4'}"
            class="person_myorder_item flex aligin-center flex-column"
          >
            <span class="person_myorder_evaluation"></span>
            <span class="color-black">待评价</span>
          </router-link>
        </div>
      </div>
      <!-- 常用推荐 -->
      <div class="person_recommend show_public">
        <div class="person_recommend_head flex justify-between">
          <h2 class="f-15 f-bold">常用推荐</h2>
        </div>
        <div class="person_recommend_con">
          <div class="person_recommend_content flex">
            <router-link
              to="/addresslists"
              class="person_recommend_item flex aligin-center flex-column"
            >
              <span class="person_recommend_address"></span>
              <span class="color-black">地址管理</span>
            </router-link>
            <router-link to="/winList" class="person_recommend_item flex aligin-center flex-column">
              <span class="person_recommend_win"></span>
              <span class="color-black">活动记录</span>
            </router-link>
            <router-link
              to="/collection"
              class="person_recommend_item flex aligin-center flex-column"
            >
              <span class="person_recommend_collect"></span>
              <span class="color-black">我的收藏</span>
            </router-link>
            <router-link
              to="/myGive"
              class="person_recommend_item flex aligin-center flex-column"
            >
              <span class="person_recommend_focus"></span>
              <span class="color-black">我的赠品</span>
            </router-link>
          </div>
          <div class="person_recommend_content flex">
            <div class="person_recommend_item flex aligin-center flex-column"  @click="tipDevelop">
              <span class="person_recommend_enter"></span>
              <span class="color-black">团队订单</span>
            </div>
            <router-link
              to="/distribution"
              class="person_recommend_item flex aligin-center flex-column"
            >
              <span class="person_recommend_share"></span>
              <span class="color-black">分享转发</span>
            </router-link>
            <div class="person_recommend_item flex aligin-center flex-column" @click="telShow">
              <span class="person_recommend_service"></span>
              <span class="color-black">客服电话</span>
            </div>
            <router-link
              to="/aftersales"
              class="person_recommend_item flex aligin-center flex-column"
            >
              <span class="person_recommend_after-sales"></span>
              <span class="color-black">退换/售后</span>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 其余列表 -->
      <div class="person_other show_public">
        <router-link tag="div" :to="{name:'activities',params:{id:4}}"  class="person_other_item flex justify-between aligin-center person_other_itemfirst">
          <span class="f-14 color-black pr-4">关于融媒优品</span>
          <i class="cubeic-select person_other_more"></i>
        </router-link>
        <router-link tag="div" :to="{name:'activities',params:{id:5}}" class="person_other_item flex justify-between aligin-center">
          <span class="f-14 color-black">用户协议</span>
          <i class="cubeic-select person_other_more"></i>
        </router-link>
        <router-link to="/setup">
          <div class="person_other_item flex justify-between aligin-center">
            <span class="f-14 color-black">通用设置</span>
            <i class="cubeic-select person_other_more"></i>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUser } from "../../api/api";
export default {
  components: {},
  data() {
    return {
      userInfo: {} //个人信息
    };
  },
  computed: {},
  watch: {},
  methods: {
     tipDevelop(){
      this.$router.push({name:'teamOrder'})
    },
    telShow(){
      this.$dialog.alert({
        title:"客服电话",
        message: "4008771866"
    });
    }
  },
  created() {},
  mounted() {
    apiUser().then(({ data: { result } }) => {
      this.userInfo = result;
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类

.p-r {
  position: relative;
  padding-bottom: 70px;
}
//头部
.person-head {
  background: url("../../assets/imgs/WechatIMG6462.png") no-repeat;
  background-size: 100% 100%;
  height: 165px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}
.person-news img {
  width: 17px;
}
.person-information {
  padding: 20px 45px;
}
.person-information_img {
  width: 55px;
  height: 55px;
  border-radius: 100%;
  margin-right: 17px;
}
.person-information_img img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.person-information_con {
  color: #fff;
  flex-direction: column;
  height: 55px;
}
//账户
.person_account {
  height: 75px;
  margin-top: -40px;
}
.person_account_item {
  width: 50%;
  text-align: center;
}
.person_account_item > img {
  width: 18px;
}
.person_account_item span {
  display: block;
}
.person_account_itemright {
  padding: 3px 0;
  border-left: 1px solid #c6c6c6;
}
// 我的订单
.person_myorder,
.person_recommend,
.person_other {
  margin-top: 18px;
}
.person_myorder_head,
.person_recommend_head {
  padding: 15px 23px;
}
.person_myorder_headright i,
.person_recommend_headright i,
.person_other_more {
  // width: 12px;
  transform: rotate(-90deg);
}
.person_myorder_con,
.person_recommend_content {
  padding: 7px 0 17px;
}
.person_myorder_item,
.person_recommend_item {
  width: 25%;
  text-align: center;
}
.person_myorder_item span:first-child,
.person_recommend_item span:first-child {
  width: 26px;
  height: 26px;
  display: block;
  margin-bottom: 10px;
  background-size: 100% 100%;
}
.person_myorder_payment {
  .bg-image("../../assets/imgs/person_myorder_payment");
}
.person_myorder_delivery {
  .bg-image("../../assets/imgs/person_myorder_delivery");
}
.person_myorder_goods {
  .bg-image("../../assets/imgs/person_myorder_goods");
}
.person_myorder_evaluation {
  .bg-image("../../assets/imgs/person_myorder_evaluation");
}
// 推荐常用
.person_recommend_address {
  .bg-image("../../assets/imgs/person_myorder_evaluation");
}
.person_recommend_win {
  .bg-image("../../assets/imgs/person_recommend_win");
}
.person_recommend_collect {
  .bg-image("../../assets/imgs/person_recommend_collect");
}
.person_recommend_focus {
  background: url("../../assets/imgs/send.png");
}
.person_recommend_enter {
   background: url("../../assets/imgs/order-icon.png");
}
.person_recommend_share {
  .bg-image("../../assets/imgs/person_recommend_share");
}
.person_recommend_service {
  .bg-image("../../assets/imgs/person_recommend_service");
}
.person_recommend_after-sales {
  .bg-image("../../assets/imgs/person_recommend_after-sales");
}
// 其余列表
.person_other_item {
  padding-right: 21px;
  margin-left: 21px;
  height: 50px;
  border-top: 1px solid #eaeaea;
}
.person_other_itemfirst {
  border: 0;
}
</style>